Object 常用錦集

2023 iThome 鐵人賽

DAY 9

自我挑戰組

前端菜雞_賀周歲成長日誌系列第 9 篇

15th鐵人賽 javascript

晚睡公主

2023-09-23 23:32:57

324 瀏覽

分享至

前言

前後端傳值時也很常用到的Object方法。

本篇文章會介紹到 Object.assign()、delete、Object.keys()、Object.values()、Object.entries()。

Object.assign()

assign是分配、指定的意思。

複製一到多個來源物件的值，到目標物件中。

使用方法

target 是目標物件，本身在這個方法中會被改變。

sources 是來源物件

Object.assign(target[[, source1], source2]) ⇒ source1 (、source2... )物件，將被依序複製至 target 物件的尾端。如果key值有重複，後面來的會覆寫前面的value值。

Object.assign 方法不能用來深拷貝，因為它只會複製屬性值；物件中如果有子物件，它們會共用同個地址，相互影響。(關於深拷貝，之後的文章有機會（「有機會」）解釋)

用上的時機

需要合併物件時。

實驗

普通地使用 Object.assign 方法

第一組：複製一個 sourceObj 到 targetObj 上。

第二組：接連複製兩個 sourceObj 到 targetObj 上。

第三組：接連複製三個 sourceObj 到 targetObj 上，且最後一個 sources3Obj 的key值跟 sources2Obj 重複，將以 sources3Obj 的key值為主。

/ 註：sources1Obj 和 target1Obj 一組做實驗，sources2Obj 和 target2Obj 一組做實驗，以此類推。
let target1Obj = {name: 'apple', price: 30}
let target2Obj = {name: 'apple', price: 30}
let target3Obj = {name: 'apple', price: 30}
let sources1Obj = {stock: 10}
let sources2Obj = {sold: 25}
let sources3Obj = {sold: 35}

Object.assign(target1Obj, sources1Obj)
Object.assign(target2Obj, sources1Obj, sources2Obj)
Object.assign(target3Obj, sources1Obj, sources2Obj, sources3Obj)

console.log(target1Obj)
console.log(target2Obj)
console.log(target3Obj)

>> {name: 'apple', price: 30, stock: 10}
>> {name: 'apple', price: 30, stock: 10, sold: 25}
>> {name: 'apple', price: 30, stock: 10, sold: 35}

用 Object.assign 方法來看看拷貝過的物件，會不會互相影響

第一組：有子物件的狀況，可以順利地複製整個物件到target1Obj。

第二組：有子物件的狀況，改變sources2Obj子物件的值，target2Obj會跟著改變。

第三組：有子物件的狀況，改變target3Obj子物件的值，sources3Obj也會跟著改變。

第四組：沒有子物件的狀況，當sources4Obj中值改變(不是子物件的值)，target4Obj中的值不會跟著改變。

// 註：sources1Obj 和 target1Obj 一組做實驗，sources2Obj 和 target2Obj 一組做實驗，以此類推。
let sources1Obj   = { b: { c: 2 }, d: { e: { f: 1 } } };
let sources2Obj   = { b: { c: 2 }};
let sources3Obj   = { b: { c: 2 }};
let sources4Obj   = { b: 2};
let target1Obj    = { a: 0};
let target2Obj    = { a: 0};
let target3Obj    = { a: 0};
let target4Obj    = { a: 0};

Object.assign(target1Obj, sources1Obj)
Object.assign(target2Obj, sources2Obj)
Object.assign(target3Obj, sources3Obj)
Object.assign(target4Obj, sources4Obj)

sources2Obj.b.c = 3 
target3Obj.b.c = 4 
sources4Obj.b = 5 

console.log(target1Obj)
console.log(target2Obj)
console.log(sources3Obj)
console.log(target4Obj)

>> {a: 0, b: { c: 2 }, d: { e: { f: 1 } }} // 可以順利地複製整個物件到target1Obj。
>> {a: 0, b: { c: 3 }} // 改變sources2Obj子物件的值，target2Obj會跟著改變。
>> {b: { c: 4 }} // 改變target3Obj子物件的值，sources3Obj也會跟著改變。
>> {a: 0, b: 2} // 當sources4Obj中值改變(不是子物件的值)，target4Obj中的值不會跟著改變。

delete

使用方法

object 是要被作用的物件

property 是要被刪除的的屬性

delete object[.property] ⇒ 刪除物件的屬性或方法，但不會動到物件原型。

let fruit = {
	name:"pear",
	price: 35,
	sold: 20,
	stock: 10 
};
delete fruit.stock; // 或是 delete fruit["stock"] 也可以
console.log(fruit)

>> {name: 'pear', price: 35, sold: 20}

Object.keys()

可以得到物件所有的 key 值。

使用方法

Object.keys(obj) ⇒ 會返回一個由此物件的 key值(屬性名) 所組成的新陣列。

實驗

var fruit = {
    name:"pear", 
    price: 35, 
    sold: 20, 
    stock: 10
};
console.log(Object.keys(fruit))

>> ['name', 'price', 'sold', 'stock']

Object.values()

可以得到物件所有的 value 值。

使用方法

Object.values(obj) ⇒ 會返回一個由此物件的 value值(屬性值) 所組成的新陣列。

實驗

var fruit = {
    name:"pear", 
    price: 35, 
    sold: 20, 
    stock: 10
};
console.log(Object.values(fruit))

>> ['pear', 35, 20, 10]

Object.entries()

可以用來遍歷物件。

使用方法

Object.entries(obj) ⇒ 會得到 obj以陣列型式被攤開；原本的 key: value 會以 ["key": "value"] 作為陣列中的一個元素呈現。

實驗

var fruit = {
    name:"pear", 
    price: 35, 
    sold: 20, 
    stock: 10
};
console.log(Object.entries(fruit))

>> [['name', 'pear'], ['price', 35], ['sold', 20], ['stock', 10]]

實際應用狀況

因為上面的 Object.values() 和 Object.entries() 都是回傳陣列，所以可使用 for…of 其他array方法來進行迭代。

Object.entries：想要直接看到物件的所有值，可以用 Object.entries() + for…of…

var fruit = { name:"pear", price: 35, sold: 20, stock: 10 };
for (const [key, value] of Object.entries(fruit)) {
  console.log(key +':'+ value); 
}

>> name:pear
>> price:35
>> sold:20
>> stock:10

跑過 for...of... 迴圈的 Object.entries(fruit)，會以 [fruit的key : fruit的value] 為一元素(element)；利用此特性，可以讓我們在跑 for…of 迴圈時，直接得到fruit物件中的 key 與 value 值。

// for...of 的寫法
for(const element of array){
	console.log(element);
}
// for...of 的範例
let arr = [10, 20, 30]
for(let value of arr){
	console.log(value);  // 10, 20, 30
}

// 用在 Object.entries(fruit) 這個陣列
var fruit = { name:"pear", price: 35, sold: 20, stock: 10 };
for (const element of Object.entries(fruit)) {
  console.log(element); 
}
// ['name', 'pear']
// ['price', 35]
// ['sold', 20]
// ['stock', 10]

Object.entries：想要直接看到物件的所有值，也可以用 Object.entries() + forEach

var fruit = { name:"pear", price: 35, sold: 20, stock: 10 };
Object.entries(fruit ).forEach(([key, value]) => {
  console.log(key +':'+ value); 
});

>>name:pear
>> price:35
>> sold:20
>> stock:10

Object.entries：用 for...in...(不用entrise)一樣也能將物件攤開

var fruit = { name:"pear", price: 35, sold: 20, stock: 10 };
for (const element in fruit){
    console.log(element +':'+ fruit[element])
}

>> name:pear
>> price:35
>> sold:20
>> stock:10

Object.values：取陣列物件中最大值

寫法：Math.max(...Object.values(testArray))

Object.values(testArray) 用於得到 Object 中 value 所組成的陣列
…Object 複製此物件(ES6) 參考
Math.max()中可傳多個數字或一陣列，會回傳其中的最大值

// 假如今天隨機找出一群人，需要找到其中最大的年紀
var testArray = { person1:18, person2:24, person3:54, person4: 30, person5: 22};
Math.max(...Object.values(testArray))

>> 54

今日結語

今天文章介紹了 Object.assign()、delete、Object.keys()、Object.values()、Object.entries()。有時間會來整理一下Object.keys()、Object.values()、Object.entries()這三者微小/微妙的差異。

筆者我自己覺得最常用的是Object.entries()，熟悉了這個方法對於把陣列展開、比對、找值都很方便。

今天就到這，如有說明不周或錯誤的地方，還請多留言討論(鞠躬)。